<!--  -->
<template>
  <div class="">
    <view class="filtrate_container">
      <u-search
        placeholder="输入想要查找的内容"
        v-model="keyword"
        @search="handleSearch"
        @clear="handleClear"
        height="70"
        action-text="筛选"
        bg-color="#fff"
        border-color="#E0E0E0"
        placeholder-color="#dadada"
        margin="0 12rpx 0 0"
        :show-action="false"
        style="width: 100%"
      ></u-search>
      <view class="filter" @click.stop="handleFilter"> 筛选 </view>
      <view class="filter" @click.stop="showTree" v-show="isShowTree"> 指标 </view>
      <!-- <image class="" src="@/static/images/shai.png" @click="handleFilter"> </image> -->
    </view>
    <view
      class="mask_layer"
      v-show="showFilter"
      :style="{ height: getHeight() }"
      @click="showFilter = false"
    >
      <view class="filter_options">
        <view
          class="filter_options_container"
          v-for="(item, index) in options"
          :key="index"
        >
          <view class="filter_options_title">
            {{ item.title }}
          </view>
          <view class="filter_options_item">
            <view
              :class="{ active: child.id == selectOptions[item.id] }"
              v-show="item.children && item.children.length"
              v-for="(child, index1) in item.children"
              :key="index1"
              @click.stop="handleConfirm(item, child)"
            >
              {{ child.name }}
            </view>
          </view>
        </view>
        <view class="filter_btns">
          <button @click.stop="reset">重置</button
          ><button @click.stop="submit">确定</button>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      default() {
        return [];
      },
    },
	isShowTree: {
		type: Boolean,
		default: true
	}
  },
  data() {
    return {
      showFilter: false,
      keyword: "",
      selectOptions: {}, // 选中的选项
    };
  },
  mounted() {
    // this.options.forEach((item) => {
    //   this.$set(this.selectOptions, item.id, item.children[0].id);
    // });
  },
  methods: {
    getHeight() {
      return `calc(100vh - ${this.CustomBar}px - 101rpx)`;
    },
    handleSearch(val) {
      uni.$emit("search", { keyword: val });
    },
    handleFilter() {
      this.showFilter = !this.showFilter;
    },
    handleConfirm(item, data) {
      this.$set(this.selectOptions, item.id, data.id);
    },
    reset() {
      this.selectOptions = {};
      uni.$emit("selectOptions", this.selectOptions);
      this.showFilter = false;
    },
    submit() {
      uni.$emit("selectOptions", this.selectOptions);
      this.showFilter = false;
    },
    showTree() {
      this.showFilter = false;
      uni.$emit("showTree", true);
    },
    handleClear() {
      uni.$emit("search", { keyword: '' });
    },
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.filtrate_container {
  background: #fff;
  width: 100%;
  padding: 17rpx 57rpx 17rpx 30rpx;
  display: flex;
  align-items: center;
  .filter {
    color: #333;
    font-size: 26rpx;
    white-space: nowrap;
    margin: 0 12rpx 0 28rpx;
  }
  image {
    width: 26rpx;
    height: 26rpx;
  }
}
.mask_layer {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 99999;
  font-size: 26rpx;
  color: #333;
  .filter_options {
    background: #fff;

    padding: 21rpx 53rpx 59rpx;
    .filter_options_container:nth-child(n + 2) {
      .filter_options_title {
        margin-top: 58rpx;
      }
    }
    .filter_options_title {
      font-weight: 500;
    }
    .filter_options_item {
      display: flex;
      flex-wrap: wrap;
      .active {
        background: #e9f1ff;
		color: #4D70F8;
        border: 1px solid #b9d5ff;
      }
      view {
        padding: 25rpx 43rpx;
        border: 1px solid #f6f6f6;
        border-radius: 12rpx;
        margin-top: 24rpx;
        margin-right: 18rpx;
        background: #f6f6f6;
      }
    }
    .filter_btns {
      display: flex;
      justify-content: space-between;
      padding-left: 17rpx;
      margin-top: 78rpx;
      button {
        width: 310rpx;
        height: 80rpx;
        font-size: 32rpx;
        border: 1px solid #4d70f8;
        border-radius: 40rpx;
        line-height: 80rpx;
        color: #fff;
        &:first-child {
          background: #ffffff;
          color: #4d70f8;
          margin-right: 28rpx;
        }
        &:last-child {
          background: linear-gradient(90deg, #417ffc, #505eeb);
          box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(22, 121, 253, 0.28);
        }
      }
    }
  }
}
</style>